<template>
  <Nav>
    <div class="container">
      <div class="chers">
        <input class="input" v-model="searchvalue" type="text" />
        <el-button class="button" type="primary" icon="el-icon-search"
          >搜索</el-button
        >
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单位控制" name="first">
          <Category />
          <div class="contentlist">
            <div
              class="contentlist_item"
              v-for="(item, index) of list.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )"
              :key="index"
              @click="changeRouterDetails(index)"
            >
              <img class="item_image" :src="item.src" :alt="item.title" />
              <p class="item_title">{{ item.title }}</p>
            </div>
          </div>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
            >
            </el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="重点点位" name="second">
          <Category />
          <div class="contentlist">
            <div
              class="contentlist_item"
              v-for="(item, index) of list.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )"
              :key="index"
              @click="changeRouterDetails(index)"
            >
              <img class="item_image" :src="item.src" :alt="item.title" />
              <p class="item_title">{{ item.title }}</p>
            </div>
          </div>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
            >
            </el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="车辆信息" name="third">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column prop="image" align="center" label="图片" min-width="20%">
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
            >
            </el-pagination></div
        ></el-tab-pane>
      </el-tabs>
    </div>
  </Nav>
</template>

<script>
import bg from "@/images/bg.png";
import Nav from "@/components/Nav/index";
import Category from "@/components/Category/index";
import image from "@/images/bg.png";
export default {
  data() {
    return {
      jianjieText:
        "XXXX始建于东晋咸和元年（公元326年），至今已有约一千七百年的历史，为XXX最早的名刹。XXXX地处杭州西湖以西，背靠北高峰，面朝飞来峰，两峰挟峙，林木耸秀，深山古寺，云烟万状。XXXX开山祖师为西XXX僧人XXX和尚。他在XXXXXX，由中原云游入浙，至XXX（即今XXXX），见有一峰而叹曰：＂此乃中天竺国灵鹫山一小岭，不知何代飞来？佛在世日，多为仙灵所隐。＂遂于峰前建寺，名曰XXX。XXXX初创时佛法未盛，一切仅初具雏形而已。至南朝梁武帝赐田并扩建，其规模稍有可观。唐大历六年（公元771年），曾作过全面修葺，香火旺盛。然而，唐末＂会昌法难＂，XXXX受池鱼之灾，寺毁僧散。直至五代吴越王钱镠，命请XXXXXX大师重兴开拓，并新建石幢、佛阁、法堂及百尺弥勒阁，并赐名XXXXX。XXXXX鼎盛时，曾有九楼、十八阁、七十二殿堂，僧房一千三百间，僧众多达三千余人。南宋建都杭州，高宗与孝宗常幸驾XXXX，主理寺务，并挥洒翰墨。宋宁宗嘉定年间，XXXX被誉为江南禅宗＂五山＂之一。清顺治年间，禅宗巨匠具德和尚住持XXXXX，立志重建，广筹资金，仅建殿堂时间就前后历十八年之久。梵刹庄严，古风重振，其规模之宏伟跃居＂东南之冠＂。清康熙二十八年（公元1689年），康熙帝南巡时，赐名＂云林禅寺＂。新中国成立后，XXXX曾多次进行大规模整修。于今，在政府落实宗教信仰自由政策的方针下，在方丈XXXXXX的引领下，XXXX两序大众以＂充分发扬佛教优良传统，积极建设东南人间净土＂为发展目标，使XXX这座千年古刹，法幢高树，海众安和，呈现出一派欣欣向荣的景象。目前，XXXX寺主要由天王殿、大雄宝殿、药师殿、直指堂（法堂）、华严殿为中轴线，两边附以五百罗汉堂、济公殿、联灯阁、华严阁、大悲楼、方丈楼等建筑所构成，共占地一百三十亩，殿宇恢宏，建构有序。大雄宝殿中有一尊释迦牟尼佛像，是以唐代禅宗佛像为蓝本，用二十四块樟木雕刻镶接而成，共高24.8米，妙相庄严，气韵生动，为国内所罕见。XX自创建以来，高僧云集，文人荟萃，儒释交融，谈禅论道，一吟一咏早己蔚然成为文化大观。此外，寺内还存有不少年代久远的佛像、法器、经幢、石塔、御碑、字画等历史文物为灵隐寺珍贵的佛教文化遗产。时序已进入新世纪，XXXX寺以其得天独厚的佛教文化、宏伟壮丽的殿宇建筑和秀美幽雅的自然风光，吸引着海内外游客。XXXX寺，它早已成为人们学佛、观光、祈福、休闲的佛教胜地。",
      jianjieimages: [
        {
          src: image,
        },
        {
          src: image,
        },
        {
          src: image,
        },
        {
          src: image,
        },
      ],
      searchvalue: "",
      appbg: `background:url('${bg}') no-repeat`,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 8, // 每页的数据条数
      activeName: "first",
      tableData: [
        {
          image: image,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      shitiList: [
        {
          id: "1",
          title: "某某物流",
          src: image,
        },
        {
          id: "2",
          title: "某某银行",
          src: image,
        },
        {
          id: "3",
          title: "某某网吧",
          src: image,
        },
      ],
      list: [
        {
          id: "1",
          title: "某某寺",
          src: image,
        },
        {
          id: "2",
          title: "某某寺",
          src: image,
        },
        {
          id: "3",
          title: "某某寺",
          src: image,
        },
        {
          id: "4",
          title: "某某寺",
          src: image,
        },
        {
          id: "5",
          title: "某某寺",
          src: image,
        },
        {
          id: "6",
          title: "某某寺",
          src: image,
        },
        {
          id: "7",
          title: "某某寺",
          src: image,
        },
        {
          id: "8",
          title: "某某寺",
          src: image,
        },
        {
          id: "9",
          title: "某某寺",
          src: image,
        },
        {
          id: "10",
          title: "某某寺",
          src: image,
        },
        {
          id: "11",
          title: "某某寺",
          src: image,
        },
        {
          id: "12",
          title: "某某寺",
          src: image,
        },
        {
          id: "13",
          title: "某某寺",
          src: image,
        },
        {
          id: "14",
          title: "某某寺",
          src: image,
        },
        {
          id: "15",
          title: "某某寺",
          src: image,
        },
        {
          id: "16",
          title: "某某寺",
          src: image,
        },
        {
          id: "17",
          title: "某某寺",
          src: image,
        },
      ],
    };
  },
  methods: {
    // 分页取id
    changeRouterDetails(index) {
      this.index = index;
      if (this.currentPage > 1) {
        const ids = (this.currentPage - 1) * this.pageSize + index;
        this.index = ids;
      }
      // console.log(this.index);

      // 传过去的id,这里要改一下路由
      // console.log(this.list[this.index].id);
      //   this.$router.push({
      //     name: "templedetails",
      //     params: {
      //       id: this.list[this.index].id,
      //     },
      //   });
    },
    tableRowClassName() {
      // 注意，这里返回的是一个对象
      let rowBackground = {};
      rowBackground.background = "rgba(0,0,0,0)";
      return rowBackground;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
  components: {
    Nav,
    Category,
  },
  mounted() {
    const id = this.$route.params.id;
    console.log(id);
  },
};
</script>

<style scoped>
.tabs {
  width: 8.916667rem /* 1712/192 */;
  color: #999ba4;
}

.table {
  font-size: 0.072917rem /* 14/192 */;
  width: 8.59375rem /* 1650/192 */;
  color: #999ba4;
  margin: 0.104167rem /* 20/192 */ auto 0;
}

.img {
  border-radius: 50%;
  width: 0.182292rem /* 35/192 */;
  height: 0.182292rem /* 35/192 */;
}

.chers {
  padding-top: 0.15625rem /* 30/192 */;
}

.input {
  width: 2.609375rem /* 501/192 */;
  height: 0.234375rem /* 45/192 */;
}

.contentlist {
  width: 8.59375rem /* 1650/192 */;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.104167rem /* 20/192 */ auto 0;
  flex-wrap: wrap;
}

.contentlist_item {
  width: 2.083333rem /* 400/192 */;
  height: 1.5625rem /* 300/192 */;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 0.104167rem /* 20/192 */;
}

.item_image {
  width: 1.822917rem /* 350/192 */;
  height: 1.145833rem /* 220/192 */;
  margin: 0.119792rem /* 23/192 */ 0 0.083333rem /* 16/192 */;
}

.item_title {
  font-size: 0.09375rem /* 18/192 */;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
  font-weight: Normal;
  text-align: center;
  height: 0.135417rem /* 26/192 */;
  line-height: 0.03125rem /* 6/192 */;
  color: #999ba4;
}
</style>